<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的客服</title>
    <link rel="stylesheet" href="/static/user/css/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="/static/user/css/reset.css">
    <link rel="stylesheet" href="/static/user/css/cart1.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2075499_0zr9klvwawti.css">
    <script src="/static/user/js/jquery-3.4.1.js"></script>
    <script src="/static/user/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="/static/user/js/cart.js"></script>
    <style>

        .kefu_header{
            width: 99%;
            height: 60px;
            background-color: #d8dde5;
        }


        .kefu_header span{
            display: block;
            width: 120px;
            height: 60px;
            margin: 0 auto ;
            line-height: 60px;
            color: black;
            font-size: 20px;

        }



        .kefu_body{
            border: 1px solid #cccccc;
            box-sizing: border-box;
            width: 99%;
            height: 420px;
            /*background-color: #ff6600;*/
        }


        .kefufi{

            width: 100%;
            height: 100px;
            /*background-color: indigo;*/

        }

        .kefufi span i {

            margin-top: 33px;
        }


        .kefufi .duihua{

            /*display: block;*/
            /*width: 300px;*/
            /*line-height: 18px;*/
            /*height: 86px;*/
            /*padding: 10px;*/
            /*background-color: #0FF;*/
            /*float: left;*/
            /*border-radius:20px;*/
            /*position: relative;*/
            /*margin-left: 20px;*/

            display: block;
            width: 290px;
            height: 80px;
            padding: 5px;
            background-color: #00FFB7;
            float: left;
            border-radius: 20px ;
            position: relative;
            margin-left: 20px;

        }

        .kefufi .weiba{
            display: block;
            position: absolute;
            right:100%;bottom:30px;width:16px;height:16px;border-width:0;border-style:solid;border-color:transparent;border-top-width:10px;border-top-color:currentColor;border-radius:32px 0 0 0;color:#dddddd;
        }

        .clientfi span i {

            margin-top: 40px;
        }


        .clientfi .duihua{

            display: block;
            width: 290px;
            height: 80px;
            padding: 5px;
            background-color: #00FFB7;
            float: right;
            border-radius: 20px ;
            position: relative;
            margin-right: 20px;

        }

        .clientfi .weiba{
            display: block;
            position: absolute;
            left:100%;bottom:30px;width:16px;height:16px;border-width:0;border-style:solid;border-color:transparent;border-top-width:10px;border-top-color:currentColor;border-radius:0 32px 0 0;
        }

        .clientfi{
            width: 100%;
            height: 100px;
            /*background-color: deeppink;*/
        }

        .kefu_content{

            width: 100%;
            height: 150px;
            /*background-color: #ffdf46;*/
        }

        .client_test{
            width: 100%;
            height: 120px;
            /*background-color: black;*/
        }
        .client_test textarea{
            width: 99%;
            height: 120px;
        }

        .client_button{
            width: 100%;
            height: 30px;
            /*background-color: #FF0000;*/
            position: relative;
        }
        .client_button button{
            width: 50px;
            height: 24px;
            position: absolute;
            right: 10px;
            top: 5px;
            background-color: #ff6600;
            /*color: #1e9246;*/
        }
        .client_button button:hover{
            background-color: #1e9246;
        }


    </style>

    <script>
        (function($){
            $(window).on("load",function(){
                $(".kefu_body").mCustomScrollbar();
                $(".kefu_body").mCustomScrollbar("scrollTo","bottom");

                //发送按钮事件
                $('.client_button button').on('click',function () {
                    // alert('hello');
                    test = $('.client_test textarea').val();
                    message='{"type":"say","data":"'+test+'","formid":"'+formid+'","toid":"'+toid+'"}';
                    div = $(' <div class="clientfi">\n' +
                        '                <span><i class="iconfont icon-yonghu" style="float: right"></i></span>\n' +
                        '                <span class="duihua"><span class="weiba"></span>'+test+'</span>\n' +
                        '            </div>');
                    ws.send(message);
                    $('#mCSB_1_container').append(div);
                    $(".kefu_body").mCustomScrollbar("scrollTo","bottom");
                    $('.client_test textarea').val('');
                });
                
                var formid={$formid};
                var toid={$toid};
                var ws =new WebSocket("ws://127.0.0.1:8282");
                ws.onmessage=function (e) {
                    //console.log(e.data);
                    var message=eval("("+e.data+")");

                    switch(message.type){
                        case 'init':
                            var bind='{"type":"bind","formid":"'+formid+'"}';
                            ws.send(bind);

                            updateisread(formid,toid);                   //让所有从toid发get该formid的消息变为已读
                            return;

                        case 'text':
                            if (toid==message.formid){

                                $div = $(' <div class="kefufi">\n' +
                                    '                <span><i class="iconfont icon-yonghu" style="float: left"></i></span>\n' +
                                    '                <span class="duihua"><span class="weiba"></span>'+message.content+'</span>\n' +
                                    '            </div>');
                                $('#mCSB_1_container').append($div);
                                $(".kefu_body").mCustomScrollbar("scrollTo","bottom");
                                updateisread(formid,toid);            //让所有从toid发get该formid的消息变为已读
                            }
                            return;

                        case 'save':
                            savemessage(message);
                    }
                };

                $(function () {
                    $.ajax({
                        url:'/user/chat/gethistorymess',
                        data:{
                            'formid':formid,'toid':toid
                        },
                        type:"POST",
                        success:function (e) {
                            console.log(e);
                            $.each(e,function (index,content) {
                                if(content.formid==formid){
                                    div = $(' <div class="clientfi">' +
                                        '                <span><i class="iconfont icon-yonghu" style="float: right"></i></span>' +
                                        '                <span class="duihua"><span class="weiba"></span>'+content.content+'</span>' +
                                        '            </div>');
                                    $('#mCSB_1_container').append(div);
                                    $(".kefu_body").mCustomScrollbar("scrollTo","bottom");
                                }else{
                                    div = $(' <div class="kefufi">' +
                                        '                <span><i class="iconfont icon-yonghu" style="float: left"></i></span>' +
                                        '                <span class="duihua"><span class="weiba"></span>'+content.content+'</span>' +
                                        '            </div>');
                                    $('#mCSB_1_container').append(div);
                                    $(".kefu_body").mCustomScrollbar("scrollTo","bottom");
                                }

                        });
                        }
                    });
                });
                
                function savemessage(mess) {
                    $.ajax(
                        {
                            url:"savechat",
                            type:"POST",
                            data:mess,
                            success:function () {

                            }
                        }
                    )
                }


                function updateisread(formid,toid) {
                    $.ajax(
                        {
                            url:"updateisread",
                            type:"POST",
                            data:{'formid':formid,'toid':toid},
                            success:function () {

                            }
                        }
                    )
                }

            });
        })(jQuery);

    </script>

</head>
<body>
<div id="header">
    <div id="userinfo_bar" class="hd_bar">
        <div class="bd">
            <div class="left-side left clearfix">
                <div class="left-side-item logo">
                    <img src="/static/user/images/xsSchool.png" alt="">
                </div>
                <div id="ECS_MEMBERZONE" class="left-side-item hdlbar">
                    <a href="javascript:;">莞工零食商城首页</a>
                    <a href="javascript:;"><i class="iconfont icon-yonghu icon-yonghu icon-sanjiaoxing_shang" ></i>登录</a>
                    <a href="javascript:;">注册</a>

                </div>
            </div>
        </div>
    </div>
</div>
<div id="main">
    <div class="kefu_header">
        <span>在线客服咨询</span>

    </div>
    <div class="kefu_body" data-mcs-theme="dark">

    </div>


    <div class="kefu_content">
        <div class="client_test"><textarea maxlength="100" placeholder="最多只能输入100个字哦！"></textarea></div>
        <div class="client_button"><button>发送</button></div>
    </div>


</div>
<!-- 楚雄零食商城页尾 -->
<div class="footer">
    <div class="footer-top">
        <div class="footer-top-container">
            <a href="#">
                <img src="/static/user/images/f1.png" alt="">
            </a>
            <a href="#">
                <img src="/static/user/images/f2.png" alt="">
            </a>
            <a href="#">
                <img src="/static/user/images/f3.png" alt="">
            </a>
            <a href="#">
                <img src="/static/user/images/f4.png" alt="">
            </a>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="footer-bottom-container">
            <ul class="links">
                <a href=""><li class="link-item">免责条款</li></a>
                <a href=""><li class="link-item">隐私保护</li></a>
                <a href=""><li class="link-item">咨询热点</li></a>
                <a href=""><li class="link-item">联系我们</li></a>
                <a href=""><li class="link-item">公司简介</li></a>
                <a href=""><li class="link-item">批发方案</li></a>
                <a href=""><li class="link-item">配送方式</li></a>
            </ul>
            <p class="copyright">
                2019-2025 © 零食商城 所有 地址：中国·广东·东莞 服务时间：09:00-22:00
            </p>
            <div class="hexin-logo">
                <img src="/static/user/images/hexin.png" alt="">
            </div>
            <div class="cnzz">
                <img src="/static/user/images/pic2.gif" alt="">
            </div>
        </div>
    </div>
</div>
<!-- 回到顶部 -->
<a class="ret" onclick="backtoTop();">
    <img src="/static/user/images/gotop.png" alt="">
</a>
</body>
</html>